<template>
    <MrCustom bg-color="bg-gradual-blue " is-back>
        <template #backText>
            返回
        </template>
        <template #content>
            设置
        </template>
    </MrCustom>

    <view class="cu-list margin padding-xs menu radius-lg  solid shadow bg-white">
        <view class="cu-item arrow" @click="clickUsername">
            <view class="content">
                <text class="cuIcon-friend text-grey"></text>
                <text class="text-black">用户名</text>
            </view>
            <view class=" action text-cut text-right text-lg" style="width: 50vw">
                <text>{{ userStore.userInfo.username }}</text>
            </view>
        </view>
        <view class="cu-item arrow" @click="updateAvatar">
            <view class="content">
                <text class="cuIcon-people text-grey"></text>
                <text class="text-black">用户头像</text>
            </view>
            <view class="action">
                <MrAvatar :size="80" :src="userStore.userInfo.avatar"></MrAvatar>
            </view>
        </view>
        <view class="cu-item arrow" @click="clickEmail">
            <view class="content">
                <text class="cuIcon-mail text-grey"></text>
                <text v-if="userStore.userInfo.email" class="text-black">解绑邮箱</text>
                <text v-else class="text-black">绑定邮箱</text>
            </view>
            <view class=" action text-cut text-right text-lg" style="width: 50vw">
                <text>{{ userStore.userInfo.email }}</text>
            </view>
        </view>
        <view class="cu-item arrow" @click="clickPassword">
            <view class="content">
                <text class="cuIcon-lock text-grey"></text>
                <text class="text-black">登录密码</text>
            </view>
            <view class=" action text-cut text-right text-lg" style="width: 50vw">
                <text v-if="userStore.userInfo.password">修改</text>
                <view v-else>设置</view>
            </view>
        </view>
        <view class="cu-item arrow" @click="clickDestroy">
            <view class="content">
                <text class="cuIcon-delete text-grey"></text>
                <text class="text-black">注销账号</text>
            </view>
        </view>
    </view>
    <view class="cu-list margin padding-xs menu radius-lg  solid shadow bg-white">
        <navigator class="cu-item arrow" url="/pages/common/protocol/index">
            <view class="content">
                <text class="cuIcon-newshot text-grey"></text>
                <text class="text-black">用户协议</text>
            </view>
        </navigator>
        <navigator class="cu-item arrow" url="/pages/common/privacy/index">
            <view class="content">
                <text class="cuIcon-form text-grey"></text>
                <text class="text-black">隐私政策</text>
            </view>
        </navigator>
        <navigator class="cu-item arrow" url="/pages/common/contact/index">
            <view class="content">
                <text class="cuIcon-creative text-grey"></text>
                <text class="text-black">联系我们</text>
            </view>
        </navigator>
        <navigator class="cu-item arrow" url="/pages/common/about/index">
            <view class="content">
                <text class="cuIcon-evaluate text-grey"></text>
                <text class="text-black">关于我们</text>
            </view>
        </navigator>
    </view>

    <view class="flex flex-sub flex-direction padding margin-bottom-xl">
        <button class="cu-btn lg padding-xs  bg-red radius-lg" @click="logout">退出登录</button>
    </view>


    <uni-popup ref="usernamePopRef" type="dialog">
        <uni-popup-dialog mode="input" title="修改用户名" :value="username"
                          placeholder="请输入内容" @confirm="updateUsername"></uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="destroyPopRef" type="dialog">
        <DestroyAccountDialog></DestroyAccountDialog>
    </uni-popup>
    <uni-popup ref="emailPopRef" type="dialog">
        <EmailDialog></EmailDialog>
    </uni-popup>
    <uni-popup ref="passwordPopRef" type="dialog">
        <PasswordDialog></PasswordDialog>
    </uni-popup>


</template>

<script setup lang="ts">

import MrCustom from "@/components/common/MrCustom.vue";
import {useUserStore} from "@/store";
import MrAvatar from "@/components/common/MrAvatar.vue";
import {uploadFile} from '/settings'
import api from "@/api";
import {ref} from "vue";
import DestroyAccountDialog from "@/pages/common/setting/components/DestroyAccountDialog.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import PasswordDialog from "@/pages/common/setting/components/PasswordDialog.vue";
import EmailDialog from "@/pages/common/setting/components/EmailDialog.vue";

const userStore = useUserStore()

const url = uploadFile.url
const name = uploadFile.name

const usernamePopRef = ref()
const destroyPopRef = ref()
const emailPopRef = ref()
const passwordPopRef = ref()

const username = ref(userStore.userInfo.username)
const clickUsername = () => {
    usernamePopRef.value.open('dialog')
}
const clickDestroy = () => {
    destroyPopRef.value.open('dialog')
}
const clickEmail = () => {
    emailPopRef.value.open('dialog')
}
const clickPassword = () => {
    if (userStore.userInfo.password) {
        passwordPopRef.value.open('dialog')
    } else {
        if (userStore.userInfo.email) {
            passwordPopRef.value.open('dialog')
        } else {
            uni.showToast({
                icon: 'error',
                title: '请先绑定邮箱'
            })
        }
    }
}

const updateUsername = (val: any) => {
    api.user.updateUsername({
        username: val
    }).then(res => {
        if (res && res.data.code === 0) {
            userStore.userInfo.username = val
            uni.redirectTo({
                url: '/pages/common/auth/login/login',
                success: () => {
                    uni.showToast({
                        title: res.data.msg + ',请重新登录'
                    })
                }
            })

        }
    })
}
const updateAvatar = () => {
    uni.chooseImage({
        count: 1, //默认9
        success: (res) => {
            uni.uploadFile({
                url: url, //仅为示例，非真实的接口地址
                filePath: res.tempFilePaths[0],
                name: name,
                success: (uploadFileRes) => {
                    let tmp = JSON.parse(uploadFileRes.data).data
                    api.user.updateAvatar({
                        avatar: tmp
                    }).then(response => {
                        if (response && response.data.code === 0) {
                            uni.showToast({
                                title: response.data.msg
                            })
                            userStore.userInfo.avatar = tmp

                        }
                    })
                }
            });
        }
    });
}
const logout = () => {
    uni.showModal({
        title: '提示',
        content: '是否要退出登录？',
        success: function (res) {
            if (res.confirm) {
                api.auth.logout().then((response) => {
                    if (response.data.code === 0) {
                        uni.redirectTo({
                            url: '/pages/common/auth/login/login',
                            success: function () {
                                userStore.setUserInfo({})
                                uni.showToast({
                                    icon: 'success',
                                    title: '退出成功'
                                })
                            }
                        })
                    }
                })
            }
        }
    });
}
</script>

<style scoped>

</style>